<template>
  <div class="message" :class="type" v-if="visible">
    <i class="icon-type iconfont" :class="'icon-'+type"></i>
    <div class="content">
      {{content}}
      <i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      content: "",
      time: 2000,
      visible: false,
      type: "info", //'success','warning','error'
      hasClose: false
    };
  },
  mounted() {
    this.close();
  },
  methods: {
    close() {
      window.setTimeout(() => {
        this.visible = false;
      }, this.time);
    }
  }
};
</script>
<style scoped>
.message {
  position: absolute;
  top: 3em;
  left: 45%;
  text-align: center;
  display: block;
  transition: all 300ms 0s;
  animation: fade-in 300ms 0s;
  transform: translateZ(0);
  backface-visibility: hidden;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5em;
  max-width: 200px;
  min-width: 160px;
  padding: 10px 20px;
}
.info {
  color: rgba(102, 102, 102, 0.8);
  background-color: rgb(252, 252, 252);
}
.success {
  color: rgba(27, 73, 9, 0.925);
  background-color: rgb(188, 250, 173);
}
.warning {
  color: rgb(238, 144, 20);
  background-color: rgb(253, 243, 214);
}
.error {
  color: rgb(235, 15, 15);
  background-color: rgb(255, 218, 218);
}
@keyframes fade-in {
  0% {
    opacity: 0;
    top: 0em;
  }
  100% {
    top: 3em;
  }
}
</style>